<template>
  <div class="cPage">
    <div class="view">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" @click="getArticleList">刷新列表</el-button>
          <el-button type="" @click="createEditNewAd(originForm2, false, 0)">新增图片项目</el-button>
          <el-button type="" @click="createEditNewAd(originForm2, false, 1)">新增新闻/视频</el-button>
          <el-button type="" @click="createEditNewAd(originForm2, false, 2)">新增照片墙</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="专栏项目标题"></el-table-column>
        <el-table-column label="类型" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ typeStatus[scope.row.type] }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间">
          <template slot-scope="scope">
            <span>
              {{ scope.row.createDate | moment("YYYY-MM-DD hh:mm:ss") }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="weight" label="权重"> </el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template slot-scope="scope">
            <span>
              <el-tag :type="scope.row.status ? 'success' : 'info'">{{
                adStatus[scope.row.status]
              }}</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="顶部菜单显示" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ statusStatus[scope.row.topMenu] }} </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-button
              @click="createEditNewAd(scope.row, true)"
              type="text"
              size="small"
            >
              编辑标题
            </el-button>
            <el-button
              v-if="scope.row.type === 0"
              @click="createEditNewAdPic(scope.row, true)"
              type="text"
              size="small"
            >
              编辑内容
            </el-button>
            <el-button
              v-if="scope.row.type === 1"
              @click="createEditNewAdPic(scope.row, true)"
              type="text"
              size="small"
            >
              编辑内容
            </el-button>
            <el-button
              v-if="scope.row.type === 2"
              @click="createEditNewAdPic(scope.row, true)"
              type="text"
              size="small"
            >
              编辑内容
            </el-button>
            <el-button
              @click="handleCurrentStatus(scope.row)"
              type="text"
              size="small"
            >
              {{ scope.row.status ? "下架" : "上架" }}
            </el-button>
            <el-button
              @click="deleteColumn(scope.row)"
              type="text"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>



      <el-dialog
        :title="
          isEdit ? '编辑专栏项目' : '新增专栏项目 ----  ' + typeStatus[viewType]
        "
        :visible.sync="dialogVisible"
        v-if="dialogVisible"
        top="8vh"
        width="70%"
      >
        <editPic
          :zlId="originForm.uuid"
          :originForm2="originForm2"
          :isEdit="isEdit"
          :closeEditModal="closeEditModal"
        />
      </el-dialog>

      <el-dialog
        :title="'编辑专栏项目 -- ' + typeStatus[originForm2.type]"
        :visible.sync="dialogVisible2"
        v-if="dialogVisible2"
        top="8vh"
        width="70%"
      >
        <editPicWallListMulti
          v-if="viewType === 0"
          :zlId="originForm.uuid"
          :originForm2="originForm2"
          :closeEditModal="closeEditModal"
        />
        <editNewList
          v-if="viewType === 1"
          :zlId="originForm.uuid"
          :originForm="originForm2"
          :closeEditModal="closeEditModal"
        />
        <editPicWallList
          v-if="viewType === 2"
          :zlId="originForm.uuid"
          :originForm2="originForm2"
          :closeEditModal="closeEditModal"
        />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import editPic from "./editPic";
import editNewList from "./editNewList";
import editPicWallList from "./editPicWallList";
import editPicWallListMulti from "./editPicWallListMulti";
import editNew from "./editNew";
import { adStatus, typeStatus, statusStatus } from "@/config/ad";

export default {
  components: {
    editPic,
    editPicWallList,
    editPicWallListMulti,
    editNew,
    editNewList,
  },
  props: ["originForm"],
  data() {
    return {
      adStatus,
      viewType: "page",
      dialogVisible: false,
      dialogVisible2: false,
      typeStatus,
      statusStatus,
      formInline: {
        searchKey: "",
      },
      tableData: [],
      // 表单相关
      isEdit: false,
      originForm2: {
        type: 0,
        status: 1,
        name: "",
        weight: 1,
        job: "教授",
        desc: "描述",
        topMenu: 1,
        weight: 0,
        items: [],
      },
    };
  },
  methods: {
    closeEditModal() {
      this.getArticleList();
      this.viewType = "page";
      this.dialogVisible = false;
    },
    createEditNewAd(config, isEdit, viewType) {
      this.isEdit = isEdit;
      this.viewType = isEdit ? this.originForm2.type : viewType;
      this.originForm2 = isEdit ? config : {
        type: 0,
        status: 1,
        name: "",
        weight: 1,
        topMenu: 1,
        weight: 0,
        items: [],
      };
      if (!isEdit) {
        this.originForm2.type = viewType;
      }
      this.dialogVisible = true;
      console.log("专栏项目", this.originForm2);
    },

    createEditNewAdPic(config, isEdit, viewType) {
      this.isEdit = isEdit
      this.originForm2 = isEdit ? config : {
        type: 0,
        status: 1,
        name: "",
        weight: 1,
        topMenu: 1,
        weight: 0,
        items: [],
      };
      this.viewType = this.originForm2.type;
      this.dialogVisible2 = true;
      console.log("专栏项目", this.originForm2);
    },
    handleCurrentStatus(config) {
      this.$confirm(
        `是否确认 ${config.status ? "下架" : "上架"} 专栏项目 [${
          config.name
        }]?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.$axios
          .put(
            `/api/zl/title/${config.uuid}.json?_method=put`,
            Object.assign({}, config, { status: Number(!config.status) })
          )
          .then((response) => {
            this.$message.success("操作成功");
            this.getArticleList(config);
          });
      });
    },
    deleteColumn(config) {
      this.$confirm(`是否确认 删除 专栏项目 [${config.name}]?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios.delete(`/api/zl/title/${config.uuid}.json`).then((response) => {
          this.$message.success("操作成功");
          this.getArticleList(config);
        });
      });
    },
    getArticleList() {
      this.$axios
        .get(`/api/zl/${this.originForm.uuid}/title.json`)
        .then((response) => {
          this.tableData = response.list;
        });
    },
  },
  created() {
    this.closeEditModal();
  },
};
</script>
<style lang="scss" scoped>
.cPage {
  padding: 30px 15px;
}
.edit {
  margin: 0px 40px 0 0;
}
</style>
